<template>
	<view :style="[AppSkinVar]">
		<view class="search-input ">
			<e-search :show-action="false" :search-icon-color="AppSkin.primary" :placeholder="$t('layout.请输入关键词')"
				v-model="keyword" @search="search"></e-search>
		</view>
		<!-- <view class="keyword">
			<view class="title">
				{{ $t('classify.热门搜索') }}
			</view>
			<view class="e-flex e-flex-wrap ">
				<view class="keyword-text e-m-r-20 e-m-b-20" v-for="(item, index) in hotList" :key="index">
					{{ item }}
				</view>
			</view>
		</view> -->
		<view class="keyword">
			<view class="title e-flex e-flex-between">
				<text>{{ $t('classify.搜索历史') }}</text>
				<image :src="$staticPath('classify/delete.png')" class="img-32" @tap="deleteHistory"
					v-show="historyIconShow"></image>
			</view>
			<view class="e-flex e-flex-wrap ">
				<view class="keyword-text e-m-r-20 e-m-b-20" v-for="(item, index) in historyList" :key="index"
					@tap="search(item)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,computed } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	
	const props = defineProps<{
		type ?: string
	}>()
	const ctx = useCurrentInstance()
	
	const keyword = ref('')


	let storageKey = 'seachHistory'
	let searchPagePath = '/pages/classify/searchResult'

	if (props.type === 'gift') {
		storageKey = 'seachGiftHistory'
		searchPagePath = '/pages/gift/searchResult'
	}
	const historyList = ref<string[]>(uni.getStorageSync(storageKey) || [])
	const historyIconShow = computed(() => {
		return historyList.value.length
	})
	
	const deleteHistory = () => {
			ctx.$showModal({
				content: ctx.$t('classify.是否清空搜索记录'),
				success: res => {
					if (res.confirm) {
						uni.removeStorageSync(storageKey)
						historyList.value = []
					}
				}
			})
		}
	const search = (value:string) => {
			if (value) {
				if (!historyList.value.find(item => item == value)) {
					historyList.value.push(value)
					uni.setStorageSync(storageKey, historyList.value)
				}
				ctx.$goTo(searchPagePath, { keyword: value })
			}
		}
	

</script>

<style lang="scss" scoped>
	.search-input {
		padding: 20rpx;
	}

	.keyword {
		padding: 0 30rpx;

		.title {
			padding: 24rpx 0;
		}

		.keyword-text {
			padding: 10rpx 20rpx;
			background: #f9f9fb;
			border-radius: 36rpx;
		}
	}
</style>